<!-- 会议提醒 -->
<template>
  <div class="app-container" v-loading="loading">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="会议主题" prop="meetingName">
        <el-input v-model="queryParams.meetingName" placeholder="请输入会议主题" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 按钮 工具栏 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table :data="reminderList">
      <el-table-column label="序号" type="index" align="center" />
      <el-table-column label="会议主题" align="center" prop="meetingName">
        <template slot-scope="scope" v-hasPermi="['meetingManagement:getInfo']">
          <el-link :underline="false" @click="lookMeeting(scope.row)" type="primary">{{ scope.row.meetingName
            }}</el-link>
        </template>
      </el-table-column>
      <el-table-column label="参会人员" align="center" prop="participants" show-overflow-tooltip />
      <el-table-column label="类型" align="center" prop="meetingType">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.meeting_type" :value="scope.row.meetingType" />
        </template>
      </el-table-column>
      <el-table-column label="会议开始日期" align="center" prop="meetingStartTime" />
      <el-table-column label="操作" align="center" v-hasPermi="['topicDiscussion:list']">
        <template slot-scope="scope">
          <el-link type="primary" :underline="false" @click="lookTopics(scope.row)">查看进程</el-link>
        </template>
      </el-table-column>
    </el-table>

    <!-- 会议详情对话框 -->
    <el-dialog title="会议详情" :visible.sync="manageOpen" width="600px" center :close-on-click-modal="false">
      <el-form ref="meetingForm" :model="manageForm" label-width="100px">
        <el-form-item label="会议主题" prop="meetingName">
          <div>{{ manageForm.meetingName }}</div>
        </el-form-item>
        <el-form-item label="类型" prop="meetingType">
          <div>{{ selectDictLabel(dict.type.meeting_type, manageForm.meetingType) }}</div>
        </el-form-item>
        <el-form-item label="主持人" prop="meetingCompere">
          <div>{{ manageForm.meetingCompereName }}</div>
        </el-form-item>
        <el-form-item label="开始时间" prop="meetingStartTime">
          <div>{{ manageForm.meetingStartTime }}</div>
        </el-form-item>
        <el-form-item label="结束时间" prop="meetingEndTime">
          <div>{{ manageForm.meetingEndTime }}</div>
        </el-form-item>
        <el-form-item label="实际开始时间" prop="meetingActuallyStartTime">
          <div>{{ manageForm.meetingActuallyStartTime }}</div>
        </el-form-item>
        <el-form-item label="实际结束时间" prop="meetingActuallyEndTime">
          <div>{{ manageForm.meetingActuallyEndTime }}</div>
        </el-form-item>
        <el-form-item label="会议文件" prop="meetingTitle">
          <div style="display: flex;gap: 20px;">
            <el-link v-for="item in manageForm.tbMeetingFile" :key="item.meetingFileUrl" :href="item.meetingFileUrl"
              target="_blank">{{ item.fileName }}</el-link>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="cancelManage">确 定</el-button>
        <el-button @click="cancelManage">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 议题列表对话框 -->
    <el-dialog title="议题列表" :visible.sync="topicsOpen" width="800px" center :close-on-click-modal="false">
      <div class="topic-title">
        <div>{{ topicsTitle }}</div>
      </div>
      <div class="container" v-if="topicsList && topicsList.length > 0">
        <div v-for="(item, index) in topicsList" :key="item.topicId" class="topcis">
          <div class="topcis-time">
            <div class="startTime">{{ parseTime(item.topicStartTime, '{h}:{i}') }}</div>
            <div class="endTime">{{ parseTime(item.topicEndTime, '{h}:{i}') }}</div>
            <div v-if="index + 1 < topicsList.length" class="line"></div>
          </div>
          <div class="topcis-info" :style="item.topicState == '1' ? 'background-color:#FEF7F4' : ''">
            <div class="line" :style="item.topicState == '1' ? 'background-color:#D9932B' : ''"></div>
            <div class="info-item">
              <span class="info-text">议题名称</span>
              <span class="info-content">{{ item.topicName }}</span>
            </div>
            <div class="info-item">
              <span class="info-text">参会领导</span>
              <span class="info-content">{{ item.leaderUser }}</span>
            </div>
            <div class="info-item">
              <span class="info-text">议题类型</span>
              <span class="info-content">{{ selectDictLabel(dict.type.topic_type, item.topicType) }}</span>
            </div>
            <div class="info-item">
              <span class="info-text">地点</span>
              <span class="info-content">{{ item.topicAddress }}</span>
            </div>
            <div class="info-item">
              <span class="info-text">需求部门</span>
              <span class="info-content">{{ item.deptName }}</span>
            </div>
            <div class="info-item">
              <span class="info-text">部门人员</span>
              <span class="info-content">{{ item.user }}</span>
            </div>
            <div class="info-btn">
              <template v-if="item.topicState == '0' && isFirstTopicStateZero() == index ">
                <el-button type="primary" v-hasPermi="['topicDiscussion:startEarly']"
                  @click="startTopic(item)">提前开始</el-button>
                <el-button type="warning" v-hasPermi="['topicDiscussion:remind']"
                  @click="reminderTopic(item)">提醒</el-button>
              </template>

              <template v-if="item.topicState == '1'">
                <el-button type="danger" v-hasPermi="['topicDiscussion:delayedStart']"
                  @click="delayTopic(item)">延长</el-button>
                <el-button type="danger" v-hasPermi="['topicDiscussion:endTopic']"
                  @click="endTopic(item)">结束议题</el-button>
              </template>
            </div>
          </div>
        </div>
      </div>
      <div v-else class="container">
        <el-empty :image="require('../../../assets/images/empty.png')" :image-size="400" class="mt20"></el-empty>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="topicsOpen = false">确 定</el-button>
        <el-button @click="topicsOpen = false">取 消</el-button>
      </span>
    </el-dialog>

    <!-- 议题延长 -->
    <el-dialog title="议题延长" :visible.sync="delayOpen" width="400px" center :close-on-click-modal="false">
      <div style="display:flex;align-items: center;">
        <label>延长时间（分钟）：</label>
        <el-input-number v-model="delayForm.delayTime" :min="0" label="请输入延长时间" style="flex:1;"></el-input-number>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitDelay">确 定</el-button>
        <el-button @click="cancelDelay">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listManage, manageInfo, listTopic } from "@/api/meeting/manage";
import { startEarly, delayedStart, endTopic, remindUser } from "@/api/meeting/reminder";
export default {
  dicts: ['meeting_type', 'topic_type'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        meetingName: null,
      },
      // 会议提醒表格数据
      reminderList: [],
      // 是否显示会议详情
      manageOpen: false,
      // 会议详情
      manageForm: {},
      // 会议名称
      topicsTitle: "",
      //是否显示议题列表
      topicsOpen: false,
      // 议题列表
      topicsList: [],
      // 是否显示延长弹窗
      delayOpen: false,
      delayForm: {
        topicId: null,
        delayTime: 0
      }
    };
  },
  created() {
    this.handleQuery();
  },
  methods: {
    // 未开始
    isFirstTopicStateZero() {
      return this.topicsList.findIndex(item => item.topicState == 0)
    },
    // 进行中
    topcisNow() {
      return this.topicsList.some(item => item.topicState == 1)
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 查询会议提醒列表 */
    getList() {
      this.loading = true;
      listManage(this.queryParams).then(response => {
        this.reminderList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 查看会议详情
    lookMeeting(row) {
      manageInfo({ meetingId: row.meetingId }).then(res => {
        res.tbMeetingFile && res.tbMeetingFile.forEach(item => {
          item.name = item.fileName
        });
        this.manageForm = res.data
        this.manageOpen = true
      })
    },
    // 会议详情取消按钮
    cancelManage() {
      this.manageOpen = false
    },
    // 查看议题
    lookTopics(row) {
      this.topicsTitle = row.meetingName
      this.getTopicsList(row)
      this.topicsOpen = true
    },
    // 获取议题列表
    getTopicsList(row) {
      listTopic({ meetingId: row.meetingId }).then(res => {
        for (const item of res.data) {
          item.user = item.tbMeetingUser.map(v => v.lastName).join('、')
          item.leaderUser = item.leaderTbMeetingUser.map(v => v.lastName).join('、')
        }
        this.topicsList = res.data
      })
    },
    // 关闭议题弹窗
    cancelTopic() {
      this.addTopics = false
    },
    // 延长议题
    delayTopic(row) {
      this.delayForm = {
        meetingId: row.meetingId,
        topicId: row.topicId,
        delayTime: 0
      }
      this.delayOpen = true
    },
    // 提交延长
    submitDelay() {
      delayedStart(this.delayForm).then(res => {
        this.getTopicsList(this.delayForm);
        this.cancelDelay()
        this.$modal.msgSuccess("延长成功");
      })
    },
    // 关闭延长议题弹窗
    cancelDelay() {
      this.delayOpen = false
    },
    // 提前开始议题
    startTopic(row) {
      this.$modal.confirm('是否确认提前开始议题?').then(function () {
        return startEarly({ topicId: row.topicId });
      }).then(() => {
        this.getTopicsList(row);
        this.$modal.msgSuccess("提前开始成功");
      })
    },
    // 结束议题
    endTopic(row) {
      this.$modal.confirm('是否确认结束议题?').then(function () {
        return endTopic({ topicId: row.topicId });
      }).then(() => {
        this.getTopicsList(row);
        this.$modal.msgSuccess("结束成功");
      })
    },
    // 提醒议题
    reminderTopic(row) {
      this.$modal.confirm('是否确认提醒参会人员?').then(function () {
        return remindUser({ topicId: row.topicId });
      }).then(() => {
        this.$modal.msgSuccess("提醒成功");
      })
    }
  }
}
</script>

<style lang='scss' scoped>
.container {
  height: 60vh;
  overflow-y: auto;
}

.topic-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
  margin-bottom: 10px;
}

.topcis {
  margin-top: 10px;
  display: flex;

  &-time {
    width: 60px;
    margin-right: 40px;
    color: #000000;
    font-size: 20px;
    text-align: center;

    .startTime {
      margin-bottom: 10px;
    }

    .line {
      margin: 10px auto;
      height: 75%;
      width: 3px;
      background-color: #2B6BD9;
      border-radius: 4px;
    }
  }

  &-info {
    width: 100%;
    font-size: 18px;
    background-color: #f4f7fe;
    padding: 20px 30px;
    border-radius: 5px;
    position: relative;

    .info-item {
      margin-bottom: 20px;
      display: flex;
      gap: 20px;
    }

    .line {
      background-color: #2B6BD9;
      position: absolute;
      left: 0;
      top: 0;
      content: '';
      height: 100%;
      width: 4px;
      display: inline-block;
      border-radius: 4px;
    }

    .info-text {
      flex: none;
      width: 80px;
    }

    .info-content {
      flex: 1;
      display: inline-block;
      color: #000000;
      width: 100%;
    }

    .info-btn {
      float: right;
      margin-top: 20px;
    }
  }
}
</style>